<script setup >
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import getRequest from '../utils/lxw_request';
import file_img from "/src/assets/images/student/file.svg";


const props = defineProps(['isOpenModal'])
const emit = defineEmits(['update:isOpenModal'])

const router = useRouter();

function closeModal() {
    emit('update:isOpenModal', false)
}


const add_file_input_ref = ref(null);
const file = ref(null)
function openFileExplorer(e) {
    e.stopPropagation();
    add_file_input_ref.value.click();

}

function addFile() {
    file.value = add_file_input_ref.value.files[0];
}

const course_id = router.currentRoute.value.params['subject_id'];

function submitWork() {
    if (file.value == null) {
        alert("File can not be empty!");
        return;
    }
    const formData = new FormData();
    formData.append("file", file.value);


    getRequest(`/stu/course/${course_id}/works`, "POST", new Headers(), formData)
        .then((response) => response.json())
        .then((json) => {
            if (json.code === 200) {
                alert("上传结课作品成功")
                file.value = null;
            } else {
                alert(json.msg);
            }
        })
        .catch((err) => {
            console.error(err);
        })
}


function downloadWork() {
    getRequest(`/stu/course/${course_id}/works`, "GET")
        .then((response) => response.blob())
        .then((blob) => {
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = "结课作品.zip"
            a.click();
            URL.revokeObjectURL(url);
        })
        .catch((err) => {
            console.error(err);
        })
}

</script>

<template>
    <div class="submit-work-modal" :class="{ open: props.isOpenModal }">
        <div class="content">
            <div class="header">
                <img src="/src/assets/images/student/close.svg" alt="Delete" @click="closeModal" />
            </div>
            <div class="main">
                <div class="work">
                    <div class="work-download"><img :src="file_img" alt="FILE ICON" /><span @click="downloadWork" >结课作品下载</span></div>
                </div>
                <div class="select">
                    <div class="file-name">{{ file === null ? "" : file['name'] }}</div>
                    <div class="select-button" @click="(e) => openFileExplorer(e)">选择文件</div>
                </div>
                <input type="file" ref="add_file_input_ref" style="display: none;" @change="addFile" accept=".zip" />
                <div class="upload">
                    <div class="upload-button" @click="submitWork">上传文件</div>
                </div>
            </div>
            <div class="footer">

            </div>

        </div>

    </div>
</template>

<style scoped >
.submit-work-modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
    z-index: 15;
}

.submit-work-modal.open {
    display: flex;
    justify-content: center;
    align-items: start;
}

.submit-work-modal>.content {
    width: 800px;
    background-color: #ffffff;
    border: none;
    border-radius: 10px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    padding: 20px 50px;
    margin-top: 65px;
}

.submit-work-modal>.content>.header {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 30px;
}


.content>.header>img {
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s;
}

.content>.header>img:hover {
    transform: rotate(90deg);
}

.content>.main {
    text-align: center;
    margin-bottom: 20px;
}

.work {
    width: 100%;
    margin-bottom: 20px;
}

.work-download {
    margin: 0 auto;

}

.work-download>img {
    vertical-align: middle;
}

.work-download>span {
    display: inline-block;
    text-decoration: underline;
    cursor: pointer;
    color: #0000EE;
    opacity: 0.75;
}

.work-download>span:hover {
    opacity: 1;
}

.select {
    border-width: 1px;
    border-radius: 10px;
    border-color: #707070;
    border-style: solid;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.file-name {
    margin-left: 10px;
    text-overflow: ellipsis;
}

.select-button {
    width: 100px;
    border-radius: 10px;
    border-color: transparent;
    user-select: none;
    cursor: pointer;
    opacity: 1;
    background-color: #8493a6;
    color: #ffffff;
}

.select-button:hover {
    opacity: 0.8;
}

.select-button:active {
    transform: translateY(2px);
}

.upload {
    width: 100%;
    margin-bottom: 20px;
}

.upload-button {
    width: 150px;
    height: 30px;
    border-radius: 10px;
    border-color: transparent;
    user-select: none;
    cursor: pointer;
    opacity: 1;
    background-color: #8493a6;
    color: #ffffff;
    margin: 0 auto;
    line-height: 30px;
}

.upload-button:hover {
    opacity: 0.85;
}

.upload-button:active {
    transform: translateY(3px);
}</style>